<template>
	<view class="container">
		<view class="">
			<u-tabs :list="tabList" :is-scroll="false" :current="tabCurrent" font-size="35" bar-width="80" @change="tabChange"></u-tabs>
		</view>
		<view class="myMargin">
			<form>
				<u-row gutter="16" justify="space-between">
					<u-col span="5" text-align="center">
						<view class="demo-layout bg-purple">日期</view>
					</u-col>
					<u-col span="3" text-align="left">
						<view class="demo-layout bg-purple">项目</view>
					</u-col>
					<u-col span="4" text-align="center">
						<view class="demo-layout bg-purple">时间</view>
					</u-col>
				</u-row>
				<u-form-item v-for="(data, index) in arrangementRecordList" :key="data.id" >
					<u-row gutter="16">
						<u-col span="5">
							<view class="demo-layout bg-purple textFont">{{data.occupyDate}}</view>
						</u-col>
						<u-col span="3">
							<view class="demo-layout bg-purple textFont">{{data.moduleName}}</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple textFont">{{data.timeOrderName}}</view>
						</u-col>
					</u-row>
				</u-form-item>
				<div v-if="arrangementRecordList.length===0" style="margin: 100rpx;">
					<u-empty   text="暂无学车记录" mode="history"></u-empty>
				</div>
			</form>
		</view>
	</view>
</template>


<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '一周内'
				}, {
					name: '一月内'
				}, ],
				tabCurrent: 0,
				arrangementRecordList: [],
			}
		},
		created() {
			api.getArrangementRecordList(this.globalConst.ARRANGEMENT_RECORD_TYPE_WEEK).then((res) => {
				if (res.code === 0) {
					this.arrangementRecordList = res.data;
				}
			})
		},
		methods: {
			getRecordList: function(type) {
				api.getArrangementRecordList(type).then((res) => {
					if (res.code === 0) {
						this.arrangementRecordList = res.data;
					}
				})
			},
			tabChange(index) {
				this.tabCurrent = index;
				if (this.tabCurrent === 0) {
					this.getRecordList(this.globalConst.ARRANGEMENT_RECORD_TYPE_WEEK);
				} else if (this.tabCurrent === 1) {
					this.getRecordList(this.globalConst.ARRANGEMENT_RECORD_TYPE_MONTH);
				}
			}
		}
	}
</script>

<style>
	.container {
		padding: 0rpx 30rpx 50rpx 30rpx;
	}

	.u-form-item .u-row{
		margin: 10rpx 0;
	}

	.demo-layout {
		height: 40rpx;
		border-radius: 8rpx;
	}

	.bg-purple {
		background: ;
	}
	.myMargin {
		padding: 40rpx 0rpx 0rpx 0rpx;
	}
	.textFont {
		font-size: 30rpx;
	}
</style>
